<template>
    <div>
        <div v-loading="fullscreenLoading">
            <div class="header">
                <span>状态：</span>
                <el-select class="status-select" v-model="status" size="small" placeholder="请选择">
                    <el-option label="全部" value></el-option>
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="已审核" value="1"></el-option>
                    <el-option label="已过期" value="2"></el-option>
                </el-select>

                <span>编码：</span>
                <el-input class="keyword" v-model="keyword" size="small" clearable @clear="getData"></el-input>
                <el-button type="primary" size="small" @click="getData">查询</el-button>
            </div>
            <table class="table" border="0" cellpadding="0" cellspacing="0">
                <thead>
                    <th>序号</th>
                    <th>广告名称</th>
                    <th>广告编号</th>
                    <th>时段</th>
                    <th>价格</th>
                    <th>广告图</th>
                    <th>跳转地址</th>
                    <th>购买时间</th>
                    <th>商家名称</th>
                    <th>状态</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{ item.snowflakeid }}</td>
                        <td>{{ item.name }}</td>
                        <td>{{ item.code }}</td>
                        <td>{{ item.begintime }} - {{ item.endtime }}</td>
                        <td>{{ item.price }}</td>
                        <td>
                            <el-image
                                v-if="item.picture"
                                class="img"
                                fit="cover"
                                :src="item.picture"
                                :preview-src-list="[item.picture]"
                            ></el-image>
                            <span v-else>暂无</span>
                        </td>
                        <td>{{ item.url }}</td>
                        <td>{{ item.addtime }}</td>
                        <td>{{ item.brandName }}</td>
                        <td>{{ getStatusStr(item.status) }}</td>
                        <td width="300">
                            <button @click="edit(item)">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div v-if="list.length" class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page.num"
                    :page-size="page.size"
                    layout="total, prev, pager, next"
                    :total="page.total"
                ></el-pagination>
            </div>
            <p class="noData" v-else>暂无数据</p>
        </div>

        <el-dialog title :visible.sync="dialogVisible" width="750px">
            <div class="dialog-inner">
                <el-form label-width="100px">
                    <el-form-item label="广告图:">
                        <ImgUploader v-model="form.picture" />
                    </el-form-item>
                    <el-form-item label="跳转地址:">
                        <el-input v-model="form.url" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="状态:">
                        <el-select class="status-select" v-model="form.status" size="small">
                            <el-option label="待审核" :value="0"></el-option>
                            <el-option label="已审核" :value="1"></el-option>
                            <el-option label="已过期" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label>
                        <el-button @click="postData" type="primary">提 交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as request from '@/api/serviceManage'
import ImgUploader from '@/components/ImgUploader'
export default {
    components: {
        ImgUploader,
    },
    data() {
        return {
            keyword: '',
            status: '',
            list: [],
            fullscreenLoading: false,
            dialogVisible: false,
            form: {
                id: '',
                picture: '',
                url: '',
                status: '',
            },
            page: {
                size: 10,
                num: 1,
                total: 0,
            },
        }
    },
    mounted() {
        this.getData()
    },
    methods: {
        handleCurrentChange(val) {
            this.page.num = val
            this.getData()
        },
        /* 获取列表数据 */

        async getData() {
            this.fullscreenLoading = true
            let query = {
                code: this.keyword,
                status: this.status,
                num: this.page.num,
                size: this.page.size,
            }
            try {
                const { errno, data, errmsg } = await request.adOrderList(query)
                if (errno === 0) {
                    this.list = data.list || []
                    this.page.num = data.pageNum
                    this.page.total = data.total
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.error(err)
            }
            this.fullscreenLoading = false
        },
        getStatusStr(status) {
            let str = ''
            switch (status) {
                case 0:
                    str = '待审核'
                    break

                case 1:
                    str = '已审核'
                    break

                case 2:
                    str = '已过期'
                    break

                default:
                    break
            }
            return str
        },

        edit(item) {
            this.form.id = item.id
            this.form.picture = item.picture || ''
            this.form.url = item.url || ''
            this.form.status = item.status
            this.dialogVisible = true
        },

        async postData() {
            if (!this.form.picture) {
                return this.$message.warning('请上传广告图')
            }
            if (!this.form.url) {
                return this.$message.warning('请填写跳转地址')
            }
            try {
                const { errno, errmsg } = await request.adOrderAudit(this.form)
                if (errno === 0) {
                    this.$message.success(errmsg)
                    this.dialogVisible = false
                    this.getData()
                } else {
                    this.$message.warning(errmsg)
                }
            } catch (err) {
                console.log(err)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.header {
    padding: 30px 0 10px 20px;
    .status-select {
        margin-right: 20px;
    }
    .keyword {
        width: 200px;
        margin-right: 10px;
    }
}
.table {
    width: 100%;
    th {
        height: 100px;
        font-weight: normal;
        border-bottom: 1px solid #ccc;
        font-size: 18px;
    }
    td {
        height: 120px;
        text-align: center;
        border-bottom: 1px solid #ccc;
        font-size: 14px;
    }
    button {
        margin: 0 10px;
        width: 110px;
        height: 32px;
        background-color: #3699ff;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        border-radius: 2px;
    }
    .img {
        width: 150px;
        height: 100px;
    }
    .desc {
        width: 500px;
    }
}
.noData {
    margin-top: 40px;
    text-align: center;
    color: #888;
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
</style>
